<template>
  <el-dialog
    :visible="visible"
    :show-close="true"
    :before-close="handleClose"
    :close="handleClose"
    :class="{'mobile-dialog':showMobilePage}"
    class="small-common-dialog-size operator-dialog"
  >
    <Title :title="title" style="margin-bottom:12px" font-size="16px"/>
    <div class="scroll-wrap">
      <div v-for="(item, index) in recordList" :key="index">
        <div class="mb12 ml10">
          <span v-if="!isLog" class="tab">{{ index ===0 ?'首次留言：':`追加说明${index}：` }}<span>{{ item.responseStatus | responseStatus }}</span></span>
          <span v-else>{{ item.logTitle }}</span>
        </div>
        <!-- 反馈内容 -->
        <template v-if="item.responseStatus !== 2 || isLog">
          <div v-for="(feedItem, idx) in item.feedbackList" :key="idx" class="ml20 mb10 f12">
            <div class="mb10">{{ feedItem.question }}</div>
            <div v-if="feedItem.isImage" class="img-wrap">
              <div v-for="(imgItem, index) in feedItem.attachment" :key="index" class="hover-show" style="display:flex;align-items:center;position:relative;">
                <el-tooltip v-if="imgItem.url" placement="top" effect="dark">
                  <div slot="content" style="max-width: 200px;">
                    <div>
                      <div>文件名：{{ imgItem.name }}</div>
                      <div>上传时间：{{ imgItem.time | format('YYYY-MM-DD HH:mm') }}<span class="download" @click="downloadFile(imgItem.url, imgItem.name,true)">下载</span></div>
                      <img :src="imgItem.url" class="prev-img" alt="">
                    </div>
                  </div>
                  <div class="url-file" @click="downloadFile(imgItem.url, imgItem.name)">
                    <img :src="imgItem.url" class="table-img" alt="">
                  </div>
                </el-tooltip>
              </div>
            </div>
            <div v-else v-html="getReply(feedItem)"/>
          </div>
        </template>
        <div v-else class="f12 ml20 mb10">{{ item.feedback }}</div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import { responseStatus } from '@/filters/status';
import { downloadFile } from '@/utils';
import { format } from '@/filters/date';

export default {
  components: { Title },
  filters: {
    responseStatus,
    format
  },
  props: {
    title: {
      type: String,
      default: '反馈记录'
    },
    isLog: {// 是否为飞来通告日志
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      recordList: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    openDialog(list = []) {
      this.visible = true;
      this.recordList = JSON.parse(JSON.stringify(list));
      this.formatFeedback(this.recordList);
    },
    formatFeedback(list = []) {
      list.map(j => {
        if (j.responseStatus !== 2 || this.isLog) {
          j.feedbackList = [];
          j.feedback = j.feedback.replace(/(\r\n)|(\n)/g, '<br>');
          j.feedback = j.feedback.split(/(?=<br>\d+\.)/);
          j.feedback.map(k => {
            let splitArr = k.split('<br>');
            splitArr = splitArr.filter(i => !!i);
            splitArr = splitArr.map(j => j && j.trim());
            const feedItem = {
              question: splitArr[0],
              reply: splitArr[1]
            };
            if (splitArr && splitArr.length > 2) {
              splitArr.shift();
              feedItem.reply = splitArr.join('<br>');
            }
            const attachment = this.getImageList(feedItem.reply);
            if (attachment && attachment.length) {
              feedItem.attachment = attachment;
              feedItem.isImage = true;
            }
            j.feedbackList.push(feedItem);
          });
        }
      });
    },
    getImageList(reply = '') {
      const regex = /name=(.*?)&&url=(.*?)&&time=(.*?)(?:,|$)/g;
      const imageArray = [];
      let match;

      while ((match = regex.exec(reply)) !== null) {
        const imageName = match[1];
        const imageUrl = match[2];
        const imgTime = match[3];
        imageArray.push({ name: imageName, url: imageUrl, time: imgTime });
      }
      return imageArray;
    },
    handleClose() {
      this.visible = false;
      this.recordList = [];
    },
    getReply(feedItem) {
      return feedItem.reply || '【回复】：';
    },
    downloadFile(url, name, download = false) {
      if (download) {
        downloadFile(url, name);
        return;
      }
      window.open(url);
    }
  }
};
</script>
<style lang="scss" scoped>
.operator-dialog{
  &::v-deep {
    .el-dialog{
      width: 640px !important;
      height: 540px;
      overflow: unset !important;
    }
    .el-dialog__body{
      padding: 16px 24px 100px !important;
    }
  }
  .fixed-radius {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .center{
    display: flex;
    justify-content: center;
  }
}
.mobile-dialog {
  &::v-deep {
    .el-dialog{
      width: 100% !important;
    }
  }
}
.tab {
  font-size: 14px;
  font-weight: bold;
}
.scroll-wrap {
  max-height: 475px;
  overflow-y: auto;
  padding-bottom: 24px;
}
.img-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.hover-show {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  &:hover {
    .delete-file {
      display: block;
    }
  }
  .single-download-file {
    color: #406eff;
    cursor: pointer;
    margin-left: 10px;
    min-width: calc(4em + 10px);
  }
  .table-single{
    min-width: 28px;
  }
}
.url-file {
  color: #406eff;
  cursor: pointer;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  &:hover {
    color: #406eff;
  }
  img {
    max-width: 100px;
    max-height: 100px;
    margin:0 8px 8px 0;
  }
}
.prev-img {
  max-width: 100px;
  max-height: 100px;
  margin-top: 5px;
  object-fit: cover;
}
.download {
  cursor: pointer;
  color: #406eff;
  margin-left: 8px;
}
</style>
